<template>
  <div :style="{
    overflow: 'hidden',
    position: 'relative',
    height: '100%',
  }">
    <!-- 注册table -->
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="[
          {
            tooltip: '查看',
            icon: 'clarity:info-standard-line',
            // onClick: handleView.bind(null, { data: record,}),
          },
          {
            tooltip: '编辑',
            icon: 'clarity:note-edit-line',
            // onClick: handleEdit.bind(null, { data: record,}),
          },
          {
            tooltip: '删除',
            color: 'error',
            icon: 'ant-design:delete-outlined',
            // popConfirm: {
            //   title: '是否确定删除？',
            //   confirm: handleDel.bind(null, record),
            // },
          },
        ]" />
      </template>
      <template #toolbar>
        <a-button type="primary">{{ '新增' }}</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { formConfig, columns, initData } from './data';
import { BasicTable, useTable, TableAction } from '/@/components/Table';

const data = initData();
export default defineComponent({
  name: 'tableTest',
  components: {
    BasicTable,
    TableAction,
  },
  setup() {
    // 设置table
    const [registerTable, { reload }] = useTable({
      title: '查询结果',
      dataSource: data,		 //数据
      columns: columns,        //表头配置
      bordered: true,
      useSearchForm: true,     //开启搜索区域
      formConfig: formConfig,  //搜索字段配置
      actionColumn: {
        width: 120,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      rowSelection: { type: 'radio' },
      pagination: { pageSize: 10 },
      showTableSetting: true,  // 显示表格设置
      tableSetting: { fullScreen: true },
      showIndexColumn: true,
      indexColumnProps: { fixed: 'left' },
    });
    return {
      registerTable,
      reload,
    };
  },
});
</script>

<style scoped></style>

